<template>
  <div class="login">
    <el-form class="col-lg-12">
      <el-form-item class="col-lg-8">
        <el-input placeholder="用户名" v-model="username"></el-input>
      </el-form-item>
      <el-form-item class="col-lg-8">
        <el-input placeholder="密码" v-model="password"></el-input>
      </el-form-item>
      <el-form-item class="col-lg-8">
        <el-input placeholder="内容" v-model="content"></el-input>
      </el-form-item>
      <el-form-item class="col-lg-8">
        <el-button @click="onConnect()" v-bind:disabled="connectionStatus">连接</el-button>
        <!--<button @click="onConnect()">连接</button>-->
        <el-button @click="onSend()" v-bind:disabled="!connectionStatus">发送</el-button>
      </el-form-item>
    </el-form>
    <!--<input placeholder="用户名" v-model="openId"/>-->
    <!--<input placeholder="发送给" v-model="target"/>-->

    <div class="col-lg-12">
      <ul>
        <li class="col-lg-8" v-for="msg in messages">{{msg.fromUser}}: {{msg.body}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";
  import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";
  import ElForm from "../../node_modules/element-ui/packages/form/src/form.vue";
  import ElFormItem from "../../node_modules/element-ui/packages/form/src/form-item.vue";
  import axios from "axios";
  import qs from "qs";

  export default {
    components: {
      ElFormItem,
      ElForm,
      ElButton,
      ElInput},
    name: 'login',
    data() {
      return {
        openId: '',
        ws: {},
        target: '',
        content: '',
        messages: [],
        connectionStatus: false,
        username: '',
        password: ''
      }
    },
    methods: {
      onConnect() {
        axios.post('http://localhost:8080/user/login', qs.stringify({
          username: this.username,
          password: this.password
        }))
          .then((response) => {
            console.log(response.data);
            this.result = response.data;
            let url = 'ws://localhost:8080/chat?userId=8175a479-4529-474a-96b2-f8deaea63f69';
            this.ws = new WebSocket(url);
            this.ws.onopen = (ev) => {
              console.log(ev);
//              this.connectionStatus = true;
//              this.ws.send(JSON.stringify({
//                type: 0,
//                openId: this.openId
//              }));

              // listening
              this.ws.onmessage = (event) => {
                console.log(event.data);
//                this.messages.push(JSON.parse(event.data));
              }
            }
          })
          .catch((error) => {
            console.log(error);
          });
      },
      onSend() {
//        let message = JSON.stringify({
//          target: this.target,
//          body: this.content,
//          openId: this.openId
//        });
//        this.ws.send(message);
        axios.post('http://localhost:8080/message/send', qs.stringify({
          username: this.username,
          password: this.password
        }))
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
  list-style: none;
}
</style>
